/*
  学习目标：条件渲染 - 类似v-if通过创建和销毁实现控制
*/

import React from 'react';
import ReactDOM from 'react-dom';

const isLoading = false;

function loadData() {
  // 1. if else语句配合函数的返回值
  if (isLoading) {
    return <h1>正在加载中...</h1>;
  } else {
    return <h2>正常显示</h2>;
  }
}

const divNode = (
  <div>
    {loadData()}
    {/* 2. 三元 */}
    {isLoading ? <h1>正在加载中...</h1> : <h2>正常显示</h2>}
    {/* 3. 逻辑且 */}
    {isLoading && <h1>正在加载中...</h1>}
    {!isLoading && <h2>正常显示</h2>}
  </div>
);

ReactDOM.render(divNode, document.getElementById('root'));
